@extends('layouts.index')

@section('content')
    <div class="main-container">
        <div class="infintescroll">
            <!-- react-empty: 594 -->
            <ul class="timeline" >
                <li class="span6 page-splitter" data-page="0" id="0"></li>

                <li class="timeline__hero span14 active">
                    <div class="bd">
                        <ul class="bd-slider">
                           @include('web.writing.slider')
                        </ul>
                    </div>
                    <div class="slide-coda hd slider-icon">
                        <ul>

                            <li><span class="slide-coda__item"></span></li>
                            <li><span class="slide-coda__item"></span></li>
                            <li><span class="slide-coda__item"></span></li>
                            <li><span class="slide-coda__item"></span></li>
                        </ul>
                    </div>
                    <!-- 下面是前/后按钮代码，如果不需要删除即可 -->
                    <a class="prev" href="javascript:void(0)"></a>
                    <a class="next" href="javascript:void(0)"></a>
                </li>
<div id="flow">


</div>
                <li class="span6 page-splitter" data-page="1" id="1"></li>
                <li class="clearfix"></li>
            </ul>
            <div class="">
                <div class="infinitescroll-trigger infinitescroll-trigger--next">
                    <div class="infinitescroll-trigger__clicker">
                        <div class="timeline__infinite-trigger span2 span6-mobile pixel-pattern pixel-pattern--10" onclick="load_more()">
                            <div id="load_more">@lang('web.load_more')</div>
                            <div id="no_more" style="display: none">@lang('web.no_more')</div>
                            <div class="arrow-container"><span></span></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <script>
        var page=1;
        var category_id='{{$category_id or ''}}';
    function  load_more(){
            $.get('{{route('get_writing')}}',{page:page++,category_id:category_id},function(data){
                if(data!='') {
                    $("#flow").html($("#flow").html() + data);
                }else{
                    $("#load_more").hide();
                    $("#no_more").show();
                }

                }

            );
    }
    load_more();

        jQuery(".timeline__hero").slide({
            mainCell: ".bd ul.bd-slider",
            effect: "fold",
            autoPlay: true,
            easing: "easeInQuint",
            delayTime: 1000,
            interTime: 8000
        });
    </script>
    @endsection